/*基本样式设置*/
html {
  font-size: 62.5%;
}

@imagePath: "/public/images";
@bgcolor: #f5f5f5;

body {
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
  font-size: 1.4rem; /* =14px */
  line-height: 1.42858;
  color: #333333;
  background-color: @bgcolor;
}
a {
  color: #333;
  text-decoration: none;
}
a:link {color: #333}		/* 未访问的链接 */
a:visited {color: #333}

/*可复用样式开始*/
/*public button style*/
/*块级大按钮开始*/
.btn-father {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 8rem;
  z-index: 10;
}

.btn-style {
  border: none;
  height: 5rem;
  width: 90%;
  border-radius: 0.5rem;
  background-color: #4FC3F7;
  color: #fff;
  letter-spacing: 0.2rem;
  line-height: 5rem;
  text-align: center;
  margin: 1.6rem auto;
  z-index: 11;
}
/*块级大按钮结束*/

/*图片大小设置开始*/
/*信息填写页面图片大小*/
.user-img {
  width: 7.5rem;
  height: 7.5rem;
}
.col-xs-4.father{
  background: url("@{imagePath}/爸爸.png") no-repeat center top;
  background-size: 7.5rem 7.5rem;
}

/*档案记录图片大小*/
.record-img {
  width: 6rem;
  height: 8rem;
}
//一般常用图的大小
.common-img {
  width: 6rem;
  height: 6rem;
}
//一般常用小图的大小
.small-img {
  width: 4.5rem;
  height: 4.5rem;
}
/*图片大小设置结束*/

/*公用字体设置开始*/
/*settings  of font in pages start*/
/*font size*/
/*常用最小字体*/
.xs-font-size {
  font-size: 1.2rem;
}
/*常用中号16px字体*/
.md-font-size {
  font-size: 1.6rem;
  line-height: 2;
}
/*常用大号字体18px*/
.lg-font-size {
  font-size: 1.8rem;
}
/*字体颜色设置font color*/
/*常用浅灰色*/
.pure-gray-color {
  color: #999999;
}
/*常用深灰色*/
.gray-color {
  color: #666666;
}
/*常用蓝色字*/
.blue-font{
  color: #4fc3f7;
}
/*常用白色字*/
.white-font{
  color: #ffffff;
}
/*字体相关设置结束settings  of font-size in pages end*/

/*公用关于间距设置，margin，padding的设置*/
/*settings of  padding in  page start*/
.common-text-padding {
  padding: 4.5rem 1rem;
}

.public-padding {
  padding: 1rem;
}

.clear-padding {
  padding: 0;
}

.clear-padding-right {
  padding-right: 0;
}

.clear-margin-bottom {
  margin-bottom: 0;
}
.clear-margin-top{
  margin-top: 0;
}

.content-padding {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/*公用关于间距设置，margin，padding的设置  结束*/




/*信息录入页面相关样式  开始 form setting start*/
.form-setting {
  height: 5rem;
  width: 60%;
  margin: 10px auto;
}

.form-setting .input-group-addon {
  border: none;
  background: @bgcolor;
  color: #333333;
}

.form-setting input {
  border: 1px solid @bgcolor;
  height: 5rem;
  background-color: @bgcolor;
  box-shadow: none;
}
.form-setting input[type="date"]{
  background-color: @bgcolor;
}
::-webkit-datetime-edit-fields-wrapper { background-color: @bgcolor; }
::-webkit-calendar-picker-indicator{
  visibility: hidden;
}

   /*信息录入页面 结束*/
/*form-setting end*/
/*主页 开始*/
.mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:rgba(0,0,0,0.6);
  z-index: 20;
  display: none;
}
.pop-window{
  position: relative;
  width:12rem;
  left: 100%;
  margin-left: -12rem;
  top: 6.3rem;
  background-color: #ffffff;
  opacity:1;
  padding: 1rem;
}
.pop-window p{
  line-height: 2;
  border-bottom: 1px solid #e5e5e5;
}
.triangle{
  width:0;
  height:0;
  border-left:1rem solid transparent;
  border-right:1rem solid transparent;
  border-bottom:1rem solid #fff;
  position: absolute;
  top: -1rem;
  left: 9rem;
}
.addUser{
  position: relative;
  width: 50px;
  height: 40px;
  margin-top: 1rem;
  background: url("@{imagePath}/addusers.png") no-repeat right;
  background-size: 50px 40px;
  z-index: 30;
}

/*首页结束*/

.row-box {
  margin-top: 1rem;
  background: #ffffff;
  box-sizing: border-box;
}

.blue-title {
  line-height: 2.5;
  border-bottom: 1px solid #e6e6e6;
}

.blue-title span {
  color: #4fc3f7;
  line-height: 2.5;
}

.blue-title a {
  line-height: 3.5;
}

.prefix-block {
  display: inline-block;
  width: 0.5rem;
  height: 1.6rem;
  vertical-align: text-bottom;
  margin-right: 1rem;
  background-color: #4fc3f7;
}
/*角色设定页面样式*/
.role-type{
  display: inline-block;
  width:79%;
  padding-left: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #F1F1F1;
}
.role-type i{
  margin-left: 5rem;
}
/*角色设定页面样式结束*/


/*健康计划页面样式 开始*/
.health-banner {
  background: url("@{imagePath}/health.png") no-repeat;
  background-size: cover;
  color: #FFFFFF;
}
.location {
  position: absolute;
  top: 2rem;
  right: -2rem;
  z-index: 333;
  width: 90px;
  height: 30px;
  padding-left: 30px;
  background: url("@{imagePath}/flag.png") no-repeat;
  background-size: 30px 30px;
  line-height: 30px;
  color: #FFA726;
}
.plan-box {
  border-top: 1px solid #e6e6e6;
  background-color: #ffffff;
}

.plan-handle-add {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-top: 1.5rem;
  background: url("@{imagePath}/add.png") no-repeat;
  background-size: 100%;
}

.plan-handle-cut {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-top: 1.5rem;
  background: url("@{imagePath}/cut.png") no-repeat;
  background-size: 100%;
}
/*健康计划页面样式 结束*/

/*常见icon样式*/
i.glyphicon{
  font-weight: normal;
}
i.icon-common{
  display: inline-block;
  margin-right: 0.5rem;
}
i.clock-icon {
  width: 2.4rem;
  height: 1.3rem;
  background: url("@{imagePath}/clock.png") no-repeat bottom;
  background-size: 2.4rem 1.3rem;
}
i.file-icon{
  width: 2.4rem;
  height: 1.3rem;
  background: url("@{imagePath}/file.png") no-repeat bottom;
  background-size: 2.4rem 1.3rem;
}

.icon-health{
  display: inline-block;
  width: 2.6rem;
  height:2.6rem;
 vertical-align: bottom;
}
.day-icon{
  background: url("@{imagePath}/day-icon.png") no-repeat center;
  background-size: 2.6rem 2.6rem;
}
.eat-icon{
  background: url("@{imagePath}/eat-icon.png") no-repeat center;
  background-size: 2.6rem 2.6rem;
}
.exercise-icon{
  background: url("@{imagePath}/exercise-icon.png") no-repeat center;
  background-size: 2.6rem 2.6rem;
}
.pill-icon{
  background: url("@{imagePath}/pill-icon.png") no-repeat center;
  background-size: 2.6rem 2.6rem;
}
i.plus-icon{
  display: inline-block;
  width: 1.5rem;
  height:1.5rem;
  background: url("@{imagePath}/plus.png") no-repeat center;
  background-size: 1.5rem 1.5rem;
  vertical-align: text-bottom;
}
i.more-icon{
  display: inline-block;
  width: 1.3rem;
  height:1.3rem;
  background: url("@{imagePath}/more-icon.png") no-repeat center;
  background-size: 1.3rem 1.3rem;
  vertical-align: text-bottom;
}
i.edit-icon{
  display: inline-block;
  width: 1.6rem;
  height: 1.8rem;
  background: url("@{imagePath}/edit.png") no-repeat;
  background-size: 1.6rem 1.8rem;
  vertical-align: text-bottom;
}

/*常见icon样式*/

.advice-box{
  background-color: #FFFFFF;
  border-top: 1px solid #e6e6e6;
}

/*测量结果页面样式*/
.test-result{
  background: url("@{imagePath}/result-banner.png") no-repeat;
  background-size: cover;
  padding: 3rem 2rem;
}
/*测量结果页面样式结束*/

/*更多细节查看页面样式开始*/
.detail-box{
  margin:2rem 0.5rem 0.5rem;
  position: relative;
  border-radius: 5px;
  height: 14rem;
  background-color: #ffffff;
}
.detail-box .col-xs-12{
  padding: 5px;
  border-bottom: 1px solid #F5F5F5;
  line-height: 3;
}
.detail-box .blue-bar{
  /*画出蓝色div并定位*/
  width: 0.6rem;
  height:7.6rem;
  border-radius: 8px;
  background-color:#4fc3f7 ;
  position: absolute;
  left: 1.6rem;
}

.detail-box .blue-bar-triangle{
  /*css画三角形并定位到竖直div右侧*/
  width: 0;
  height: 0;
  border-left:0.5rem solid transparent;
  border-right:0.5rem solid transparent;
  border-bottom:0.5rem solid #4fc3f7;
  transform: rotate(90deg);
  position: absolute;
  top: 57px;
  left: 23px;

}
.detail-box .col-xs-4{
  /*给蓝色的竖条留出显示位置*/
  padding-left: 3rem;
}
.detail-box .col-xs-8{
/*设置多列文本换行超出行数显示省略号,这是webkit的私有属性， -webkit-line-clamp，不是css承认的属性*/
  margin-top: 7px;
  height: 8rem;
  display: -webkit-box;
  box-sizing: border-box;
  -webkit-box-orient: vertical;
  overflow : hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
}
/*更多细节查看页面样式结束*/


